import React, {useEffect, useState} from 'react'
import {Text, View} from '@tarojs/components'
import Taro, {usePageScroll} from '@tarojs/taro'
import './Topping.scss'

const Topping: React.FC = React.memo(() => {
  const [windowHeight, setWindowHeight] = useState(667)
  const [show, setShow] = useState(false)
  const [isScroll, setScroll] = useState(false)

  useEffect(() => {
    let ret = Taro.getWindowInfo()
    setWindowHeight(ret.windowHeight)
  }, [])

  usePageScroll((e) => {
    let isShow = windowHeight <= e.scrollTop
    if (isShow !== show) {
      setShow(isShow)
    }
  })

  function onTopping () {
    if (isScroll) {
      return
    }
    setScroll(true)
    Taro.pageScrollTo({
      duration: 500,
      scrollTop: 0,
      success: () => {
        setScroll(false)
      }
    })
  }

  return <View className={`topping_wrap ${show ? 'active' : ''}`} onClick={onTopping}>
    <Text className='iconfont icon-rocket' />
  </View>
})

export default Topping
